<template>
	<view class="home">
		<view class="container">
			<uni-nav-bar title="" :status-bar="true" background-color="#00000000" color="#000" :border='false'
				leftWidth='300rpx'>
				<template #left>
					<view @click="goBack" style="display: flex; align-items: center;">
						<image style="width: 200rpx; height: 40rpx;" src="/static/logo.png" mode=""></image>
					</view>
				</template>
			</uni-nav-bar>
			<view class="TaskCenter">
				<view class="box">
					<view class="head">
						<view class="">
							<view class="">
								<text>任务</text>中心
							</view>
							<view class="">
								电商成长之路
							</view>
						</view>
						<view class="">
							更多
						</view>
					</view>
					<view class="">
						<image :src="imageUrl+'icon1.png'" mode=""></image>
						<view class="">
							<view class="">
								<view class="">
									成长任务
								</view>
								<view class="">
									(2/10)
								</view>
							</view>
							<view class="">
								<view class="">
									加入万店矩阵,获流量...
								</view>
								<view class="">
									15297人已完成
								</view>
							</view>
						</view>
					</view>
					<view class="">
						<image :src="imageUrl+'icon2.png'" mode=""></image>
						<view class="">
							<view class="">
								<view class="">
									日常任务
								</view>
								<view class="">
									接受任务
								</view>
							</view>
							<view class="">
								<view class="">
									开启视频号橱窗,本...
								</view>
								<view class="">
									15297人已完成
								</view>
							</view>
						</view>
					</view>
				</view>
		
			</view>
		
		</view>
		<view class="introduce">
			<view class="">
				<image :src="imageUrl+'icon3.png'" mode=""></image>
				<view class="">
					<view class="">
						AI教你做电商
					</view>
					<view class="">
						新趋势新机遇
					</view>
				</view>
			</view>
			<view class="">
				<image :src="imageUrl+'icon4.png'" mode=""></image>
				<view class="">
					<view class="">
						我的橱窗
					</view>
					<view class="">
						开启赚钱之路
					</view>
				</view>
			</view>
		</view>
		<view class="IntroductionDiagram">
			<uni-swiper-dot class="uni-swiper-dot-box" style="border-radius: 16rpx; overflow: hidden; height: 160rpx;"  @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="border-radius: 16rpx; overflow: hidden; height: 160rpx;" circular>
					<swiper-item v-for="(item, index) in 3" :key="index">
						<view class="swiper-item" style="background-color:rgb(255, 122, 69); height: 160rpx;">
							<text style="color: #000; font-size: 26rpx;">{{index+1}}</text>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="theCharts">
			<view class="">
				<image src="" mode=""></image>
				万店达人排行榜
				<image src="" mode=""></image>
			</view>
			<view class="">
				<view class="">
					
				</view>
				<view class="">
					用户
				</view>
				<view class="">
					销量<text>(单)</text>
				</view>
				<view class="">
					金额<text>(元)</text>
				</view>
				<view class="">
					佣金<text>(元)</text>
				</view>
			</view>
			<view class="list" v-for="(item,index) in 20" key="index">
				<view class="">
					<image v-if="index + 1 == 1" style="width:40rpx; height: 34rpx;" :src="imageUrl+'icon5.png'" mode=""></image>
					<image v-if="index + 1 == 2" style="width:40rpx; height: 34rpx;" :src="imageUrl+'icon6.png'" mode=""></image>
					<image v-if="index + 1 == 3" style="width:40rpx; height: 34rpx;" :src="imageUrl+'icon7.png'" mode=""></image>
				</view>
				<view class="">
					<view class="">
						李四哈哈 {{index}}
					</view>
				</view>
				<view class="">
					8999
				</view>
				<view class="">
					7w
				</view>
				<view class="">
					23423
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,getCurrentInstance
	} from 'vue';
	const { appContext } = getCurrentInstance();
	const imageUrl = appContext.config.globalProperties.$imageUrl
	let aa = ref(false)
</script>

<style lang="scss" scoped>
	.home{
		background: rgb(246, 247, 248);
	}
	.container {
		width: 100%;
		// height: 720rpx;
		padding-bottom: 30rpx;
		background-image: url('http://mdomall.oss-cn-hangzhou.aliyuncs.com/static/bg1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.TaskCenter {
			width: 92%;
			margin: 0 auto;
			margin-top: 40rpx;
			// height: 250px;x
			box-sizing: border-box;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 0.75);
			border-width: 0px 0px 4px 2px;
			border-style: solid;
			border-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 8px 16px rgba(255, 156, 33, 1);

			.box {
				width: 100%;
				height: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background-image: url('http://mdomall.oss-cn-hangzhou.aliyuncs.com/static/bg2.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;

				.head {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-bottom: 30rpx;

					>view:nth-child(1) {
						display: flex;
						align-items: flex-end;

						>view:nth-child(1) {
							font-size: 40rpx;
							line-height: 44rpx;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							text-align: left;
							vertical-align: top;
							margin-right: 15rpx;

							>text {
								color: rgba(237, 52, 52, 1);
							}
						}

						>view:nth-child(2) {
							font-size: 28rpx;
							color: rgba(255, 148, 18, 1);

						}
					}

					>view:nth-child(2) {
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
					}
				}

				>view:nth-child(2) {
					display: flex;
					align-items: flex-end;
					border-radius: 8rpx;
					margin-bottom: 24rpx;

					image {
						width: 80rpx;
						height: 135rpx;
						flex-shrink: 0;
						margin-right: 2rpx;
					}

					background-color: #fff;

					>view {
						flex: 1;
						padding: 28rpx;
						padding-left: 0;
						box-sizing: border-box;

						// display: flex;
						>view {
							display: flex;
							align-items: center;
							justify-content: space-between;
							box-sizing: border-box;
						}

						>view:nth-child(1) {

							// margin-bottom: 12rpx;
							>view:nth-child(1) {
								font-size: 34rpx;
							}

							>view:nth-child(2) {
								font-size: 28rpx;
								color: rgba(255, 127, 6, 1);
							}
						}

						>view:nth-child(2) {
							>view:nth-child(1) {
								font-size: 30rpx;
								color: rgba(102, 102, 102, 1);
							}

							>view:nth-child(2) {
								font-size: 26rpx;
								color: rgba(153, 153, 153, 1);
								padding-top: 40rpx;
							}
						}
					}
				}

				>view:nth-child(3) {
					display: flex;
					align-items: flex-end;
					border-radius: 8rpx;

					image {
						width: 80rpx;
						height: 135rpx;
						flex-shrink: 0;
						margin-right: 2rpx;
					}

					background-color: #fff;

					>view {
						flex: 1;
						padding: 22rpx;
						padding-left: 0;
						box-sizing: border-box;

						// display: flex;
						>view {
							display: flex;
							align-items: center;
							justify-content: space-between;
							box-sizing: border-box;
						}

						>view:nth-child(1) {

							// margin-bottom: 12rpx;
							>view:nth-child(1) {
								font-size: 34rpx;
							}

							>view:nth-child(2) {
								opacity: 1;
								border-radius: 50px;
								background: rgb(255, 127, 6);
								font-size: 30rpx;
								color: #fff;
								padding: 14rpx 20rpx;
							}
						}

						>view:nth-child(2) {
							>view:nth-child(1) {
								font-size: 30rpx;
								color: rgba(102, 102, 102, 1);
							}

							>view:nth-child(2) {
								font-size: 26rpx;
								color: rgba(153, 153, 153, 1);
								padding-top: 40rpx;
							}
						}
					}
				}
			}


		}

	}

	.introduce {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 94%;
		margin: 0 auto;
		padding: 26rpx;
		padding-top: 36rpx;
		box-sizing: border-box;

		>view {
			display: flex;
			align-items: center;

			image {
				width: 88rpx;
				height: 88rpx;
				margin-right: 16rpx;
			}

			>view {
				>view:nth-child(1) {
					font-size: 36rpx;
					font-weight: 500;
					margin-bottom: 4rpx;

				}

				>view:nth-child(2) {
					font-size: 28rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}
	.IntroductionDiagram{
		width: 94%;
		margin: 0 auto;
		padding: 20rpx;
		padding-top: 10rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		overflow: hidden;
		.uni-swiper__warp{
			height: 160rpx;
			overflow: hidden;
		}
		.uni-swiper-dot-box{
			height: 160rpx;
			overflow: hidden;
		}
	}
	.theCharts{
		width: 94%;
		margin: 0 auto;
		height: 1000px;
		border-radius: 8px;
		padding-top: 32rpx;
		background: linear-gradient(180deg, rgb(255, 241, 224) 0%, rgb(255, 253, 250) 18.05%, rgb(255, 255, 255) 100%);
		>view:nth-child(1){
			display: flex;
			justify-content: center;
			align-items:center;
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(17, 17, 17, 1);
			margin-bottom: 36rpx;
			image{
				width: 20rpx;
				height:24rpx;
			}
		}
		>view:nth-child(2){
			display: flex;
			align-items:center;
			padding-bottom: 24rpx;
			margin-bottom: 34rpx;
			border-bottom:1px solid rgb(255, 211, 161);
			>view{
				font-size: 30rpx;
				color: rgba(102, 102, 102, 1);

			}
			>view:nth-child(1){
				width: 14%;
			}
			>view:nth-child(2){
				width: 22%;
			}
			>view:nth-child(3){
				width:22%;
				text{
					color: rgba(153, 153, 153, 1);
					font-size: 26rpx
				}
			}
			>view:nth-child(4){
				width: 22%;
				text{
					color: rgba(153, 153, 153, 1);
					font-size: 26rpx
				}
			}
			>view:nth-child(5){
				width: 20%;
				text{
					color: rgba(153, 153, 153, 1);
					font-size: 26rpx
				}
			}
		}
		.list{
			display: flex;
			align-items:center;
			margin-bottom: 40rpx;
			>view{
				font-size: 32rpx;
				color: rgb(17, 17, 17);
		
			}
			>view:nth-child(1){
				width: 14%;
				display: flex;
				align-items:center;
				justify-content:center;
			}
			>view:nth-child(2){
				width: 22%;
				>view{
					width: 100rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
			>view:nth-child(3){
				width:22%;
			}
			>view:nth-child(4){
				width: 22%;
			}
			>view:nth-child(5){
				width: 20%;
			}
		}
	}
</style>